<template>
	<view>
		<view class="product-flash">
			<view class="product-flash-back" @click="onPageBackHome()">
				<image src="../../../static/icon-close.png"></image>
			</view>
			<swiper class="product-flash-box">
				<swiper-item class="product-flash-box-item">
					<image src="../../../static/food-002.jpg"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="product-basic">
			<view class="product-basic-header">
				<view class="layout">
					<view class="product-basic-header-subject">酱香拿铁</view>
					<view class="product-basic-header-collection">收藏口味</view>
				</view>
			</view>
			<view class="product-basic-body">
				<view class="product-basic-body-item">
					<view class="layout">
						<view>杯型</view>
						<view></view>
					</view>					
				</view>
				<view class="product-basic-body-item">
					<view class="layout">
						<view>杯型</view>
						<view></view>
					</view>					
				</view>
				<view class="product-basic-body-item">
					<view class="layout">
						<view>杯型</view>
						<view></view>
					</view>					
				</view>
				<view class="product-basic-body-item">
					<view class="layout">
						<view>杯型</view>
						<view></view>
					</view>					
				</view>
			</view>
		</view>
		<view class="product-block">
			<view class="product-block-subject">产品详情</view>
			<view class="product-block-content"></view>
		</view>
		<view class="product-block">
			<view class="product-block-subject">主要原料</view>
			<view class="product-block-content">咖啡沅江/椰浆音频</view>
		</view>
		<view class="product-block">
			<view class="product-block-subject">价格说明</view>
			<view class="product-block-content">
				1.面价：在菜单中标示为黑色或划横线的价格，并非商品原价。除非瑞幸另有不同说明，面价是优惠活动（如适用）的计算基数或不使用优惠卷（折扣卷/抵佣金等）/不参加满减活动且非促销活动
			</view>
		</view>
		
		<view class="bottom">
			<view class="shopping-body">
				<view class="shopping-body-header">
					<view class="layout">
						<view class="shopping-body-header-price">
							￥19<text>(面价￥32)</text>
						</view>
						<view class="shopping-body-header-volume">
							<view class="layout">
								<view class="shopping-body-header-volume-reduce">
									<image src="../../../static/icon-reduce.png"></image>
								</view>
								<view class="shopping-body-header-volume-text">1</view>
								<view class="shopping-body-header-volume-add">
									<image src="../../../static/icon-add-bold.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="shopping-body-bottom">太妃乳棒香厚乳拿铁$19+热+标准甜+默认奶油</view>
				
			</view>
			<view class="layout">
				<view class="bottom-item bottom-button-shopping" @click="onShoppingSumbit()">立即购买</view>
				<view class="bottom-item bottom-button-checkout" @click="onShoppingButton()">加入购物车</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			onPageBackHome:function(){
				uni.switchTab({
					url:"/pages/product/catalog/catalog"
				})
			},
			onShoppingButton:function(){
				uni.switchTab({
					url:"/pages/product/catalog/catalog"
				})
			},
			onShoppingSumbit:function(){
				uni.redirectTo({
					url:"/pages/transaction/checkout/checkout?productID=23423"
				})
			}
		}
	}
</script>

<style>
	
.product-flash { height: 600rpx; }
.product-flash-box { height: 600rpx; }
.product-flash-box-item { height: 600rpx; z-index:99; }
.product-flash-back { position: fixed; top:25rpx; left:25rpx; width: 50rpx; height:50rpx; z-index: 100;}

.product-basic { width: 700rpx; padding: 25rpx; min-height: 200rpx; background: #fff;}
.product-basic-header { padding: 30rpx 0;}
.product-basic-header-subject { font-size: 18px; }
.product-basic-body-item { padding: 20rpx 0;}

.product-block { border-radius: 20rpx; width: 660rpx; padding: 20rpx; background: #fff; margin: 10rpx auto; }
.product-block-subject { font-size: 14px; color: #000;}
.product-block-content { padding-top: 10rpx; line-height: 20px; font-size: 12px; color: #666; }

.bottom { position: fixed; bottom: 0; right: 0; left: 0; background: #fff; padding: 40rpx; }
.bottom-item { width: 320rpx; height: 30rpx; line-height: 30rpx; text-align: center; font-size: 16px; padding: 20rpx 0 ;}

.bottom-button-shopping { border: #f30 1px solid; border-radius: 40rpx; }
.bottom-button-checkout { background: #000; border: #000 1px solid; color: #fff; border-radius: 40rpx; }

.shopping-body { padding-bottom: 20rpx;}
.shopping-body-header-price { color: red; font-size: 16px; font-weight: 700;}
.shopping-body-header-price text { padding-left: 10rpx; font-weight: 500!important; color: gray; font-size: 12px!important;}
.shopping-body-header-volume-reduce,.shopping-body-header-volume-add { width: 50rpx; height: 50rpx;}

.shopping-body-header-volume-text { width: 50rpx; height: 50rpx; line-height: 50rpx; font-size: 16px; text-align: center;}
</style>
